// MENU
// <nav class="menu"><ul><li><a></a></li></ul></nav>
// --------------------------------------------------
%menu {
    @include clearfix();

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    a {
        @include transition();
        text-decoration: none;
    }
}

%site_nav_icon {
    margin-right: $unit * 0.5px;
    position: relative;
    top: 5px;
    font-size: 24px;
}

.site-header .menu {
    @extend %menu;

    margin: 0 auto $unit * 1px;
    padding-left: $unit * 1.5px;

    & > ul > li {

        & > a {
            @include fontSize(14);
            color: $color1;

            &:hover {
                color: $color2;
                padding-left: $unit / 2 * 1px;
            }
            
            &.icon-home::before {
                @extend %site_nav_icon;
                content: "\e00d";
            }
            &.icon-gallery::before {
                @extend %site_nav_icon;
                content: "\e009";
            }
            &.icon-contact::before {
                @extend %site_nav_icon;
                content: "\e007";
            }
        }
    }
}

.site-footer .menu {
    @extend %menu;
    color: $white;

    ul {
        height: auto;

        li {
            display: block;
            padding: .125em 0;
            font-size: $unit * 0.75px;
            font-family: $fontCopy;
            line-height: inherit;
            border-right: 0 none;

            &:hover {
                a {
                    color: darken( $color2, 20% );
                }

                ul {
                    display: none;
                }
            }

            ul {
                display: none;
            }
        }
    }
}

